<template>
  <div class="loginpassw">
    <Card>
      <p slot="title">修改登录密码</p>
      <div class="passwForm">
        <Form ref="formInline" :model="formInline" :label-width="100" :rules="ruleInline">
          <FormItem prop="oldPassw" label="旧密码">
            <Input  type="password" v-model="formInline.oldPassw" placeholder="请输入旧的登录密码"></Input>
          </FormItem>
          <FormItem prop="newPassw" label="新密码">
            <Input  type="password" v-model="formInline.newPassw" placeholder="请输入新的登录密码"></Input>
          </FormItem>
          <div class="text"> 登录密码为8-16位的字母和数字组合</div>
          <FormItem prop="againPassw" label="确认新密码">
            <Input  type="password" v-model="formInline.againPassw" placeholder="请输入确认密码"></Input>
          </FormItem>
          <FormItem>
            <Button  @click="save" class="com-btm mr-1">保存</Button>
            <Button  @click="gohome" class="com-btm ">返回</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>

</template>
<script>
  import {merLoginPw} from '@/api/user'
  import { mapMutations } from 'vuex'
  export default {
    name: "change_passw_page",
    data() {
      // 密码验证
      const pwdCheck = async (rule, value, callback) => {
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
        if (value.length < 8) {
          this.changeFlag = 2;
          return callback(new Error('密码不能少于8位！'));
        } else if (value.length > 16) {
          this.changeFlag = 2;
          return callback(new Error('密码最长不能超过16位！'));
        } else if (!reg.test(value)) {
          this.changeFlag = 2;
          return callback(new Error('密码输入有误，请检查格式是否正确！'));
        } else {
          this.changeFlag = 1;
          callback()
        }
      }
      // 重复密码验证
      const pwdAgainCheck = async (rule, value, callback) => {
        if (value.length < 1) {
          this.changeAgainFlag = 2;
          return callback(new Error('重复密码不能为空！'));
        } else if (this.formInline.newPassw != this.formInline.againPassw) {
          this.changeAgainFlag = 2;
          return callback(new Error('两次输入密码不一致！'));
        } else {
          this.changeAgainFlag = 1;
          callback()
        }
      };
      return {
        changeFlag: 0,
        changeAgainFlag: 0,
        formInline: {
          oldPassw: '',
          newPassw: '',
          againPassw: ''
        },
        ruleInline: {
          oldPassw: [{
            validator: pwdCheck,
            trigger: 'blur'
          }],
          newPassw: [{
            validator: pwdCheck,
            trigger: 'blur'
          }],
          againPassw: [{
            validator: pwdAgainCheck,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
        ...mapMutations([
          'closeTag'
        ]),
        close () {
          this.closeTag({
            name: 'loginpassw_page'
          })
        },
      save() {
        this.$refs['formInline'].validate((valid) => {
          if (valid) {
            merLoginPw(this.formInline).then(res=>{
              this.$Message.success(res.msg);
               this.close ()
            }).catch(err=>{
               this.$Message.error(err.msg);
            })
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      gohome() {
        this.$router.push({
          name: 'home'
        })
      }
    }
  }
</script>
<style lang="less">
  .loginpassw .ivu-card-head {
    position: relative;
    }
   .loginpassw .ivu-card-head::after {
      content: '';
      position: absolute;
      left: 10px;
      bottom: 0;
      width: 95px!important;
      border-bottom: 2px solid #5FB878;
  }
  .loginpassw {
    .passwForm {
      width: 50%;
      margin: 0 auto;

      .ivu-form-item {
        min-height: 36px;
        font-size: 14px;
      }
      .text {
        margin-left: 100px;
        color: #999;
        margin-top: -15px;
        margin-bottom: 20px;
      }
    }
  }
</style>
